<template>
    <div class="add">
    <el-row class="head">
        <el-col>——新增报账单/报账单</el-col>
    </el-row>
        <el-row class="title">
            <el-col>新增报账单</el-col>
        </el-row>

        <el-form  :model="ruleform" label-width="100px" class="formrule" :rules="rules"  ref="ruleform">
            <el-form-item label="报障分类">
                <el-select v-model="ruleform.typeId" placeholder="请选择报障分类" @change="refresh" prop="typeId">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报障人工号" v-if="this.showUser" placeholder="请输入报障人工号" prop="userId">
                <el-input v-model="ruleform.userId"></el-input>
            </el-form-item>
            <el-form-item label="报障人姓名" v-if="this.showUser"  placeholder="请输入报障人姓名" prop="userName">
                <el-input v-model="ruleform.userName"></el-input>
            </el-form-item>
            <el-form-item label="报障人手机" v-if="this.showUser"  placeholder="请输入报障人手机"  prop="userMobile">
                <el-input v-model="ruleform.userMobile"></el-input>
            </el-form-item>
            <el-form-item label="报障区域" prop="locationId">


                <el-select v-model="ruleform.locationId" placeholder="请选择报障区域">
                    <el-option
                            v-for="item in locations"
                            :key="item.id"
                            :label="item.second"
                            :value="item.id">
                        <span style="float: left">{{ item.second }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.first }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="故障房间号" prop="userRoom">
                <el-input v-model="ruleform.userRoom" placeholder="请输入故障房间号" ></el-input>
            </el-form-item>
            <el-form-item label="报障类别" prop="userDescription" >
                <el-select v-model="ruleform.userDescription" placeholder="请选择报障类别" allow-create filterable  @change="getDescription">
                    <el-option
                            v-for="item in descriptions"
                            :key="item.id"
                            :label="item.description"
                            :value="item.description"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="维修完成">
                <el-switch v-model="ruleform.delivery"></el-switch>
            </el-form-item>
            <el-form-item v-if="ruleform.delivery" label="解决方式" prop="adminDescription" >

                <el-select v-model="ruleform.adminDescription" allow-create filterable placeholder="请选择或输入解决方式">
                    <el-option
                            v-for="item in beforedescriptions"
                            :key="item.id"
                            :label="item.description"
                            :value="item.description"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(ruleform)">提交</el-button>
                <el-button @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "add",
        computed:{
            user(){
                return this.$store.getters.user;
            }
        },
        data(){
            return{
                showUser:true,
                ruleform:{
                    typeId:1,
                    status:'2',
                    adminId:'',
                    userName:'',
                    userId:'',
                    userRoom:'',
                    userMobile:'',
                    locationId:'',
                    userDescription:'',
                    adminDescription:'',
                    delivery:'false',
            },
                options:[],
                locations:[],
                descriptions:[],
                beforedescriptions:[],
                rules:{
                    typeId:[
                        { required: true, message: '请选择报障分类', trigger: 'change' },
                    ],
                    userName:[
                        { required: true, message: '请输入你的名字', trigger: 'blur' },
                        { min: 2, max: 5, message: '请检查你的姓名', trigger: 'blur' }],

                    userId:[
                    { required: true, message: '请输入你的工号', trigger: 'blur' },
                    { min:'2', message: '请检查你的工号', trigger: 'blur' }],
                    userRoom:[
                        { required: true, message: '请输入房间号', trigger: 'blur' },
                        { min: 2, message: '请检查你的房间号', trigger: 'blur' }
                    ],
                    locationId:[
                        { required: true, message: '请选择报障区域', trigger:'change' },
                    ],
                    userMobile:[
                        { required: true, message: '请输入你的手机号', trigger: 'blur' },
                        { min:'11',max:'11', message: '请检查你的手机号', trigger: 'blur' }
                    ],
                    adminDescription:[
                        { required: true, message: '请输入你的解决方式', trigger: 'blur' },
                        { min:'2', message: '解决方式不得低于4个字', trigger: 'blur' }
                    ],
                    userDescription:[
                        { required: true, message: '请选择报障类别', trigger:'change' },
                    ]
            },
            }
        },
        created(){
            //获取type列表
            this.getTypes();
            //获取地区列表
            var data = {'typeId': 1};
            this.getLocations(data);
            //获取出现的问题列表
            this.getListUser(data);
            this.getShowUser();

        },
        methods:{
            //获取type列表
            getTypes()
            {
                this.$axios.post("/api/v1/user/type/list").then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        this.options=data1.data;
                    });
            },
            //获取地区列表
            getLocations(data)
            {
                this.$axios.post("/api/v1/user/location/list", data).then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        console.log(data1);
                        this.locations = data1.data;
                    });
            },
            //获取出现的问题列表
            getListUser(data){
                this.$axios.post("/api/v1/user/repair/listuser", data).then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        console.log(data1);
                        this.descriptions = data1.data;
                    });
            },
            getShowUser()
            {
                console.log(this.ruleform);
                var i = 0;
                var id= 0;
                for (i; i < this.options.length; i++)
                {
                    if (this.ruleform.typeId === this.options[i].id)
                    {
                       this.showUser=this.options[i].needUserInfo;
                    }
                }
            },
            //提交报账单
            onSubmit(){

                this.$refs.ruleform.validate((valid) => {
                    if (valid) {
                        this.ruleform.adminId=this.user.id;
                        console.log("om");
                        if (this.ruleform.delivery)
                        {
                            this.ruleform.status='3';
                        }
                        console.log(this.ruleform);
                        this.$axios.post("/api/v1/user/repair/create", this.ruleform).then(result => {

                            return result.data;
                        })
                            .then(data1 => {
                                if (data1.code === 0)
                                {
                                    this.reset();
                                }
                                this.$message(
                                    {
                                        type:'success',
                                        message: data1.msg
                                    }
                                )
                            });

                        console.log(this.ruleform);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置数据
            reset(){
                this.ruleform.userId='';
                this.ruleform.userRoom='';
                this.ruleform.userMobile='';
                this.ruleform.userName='';
                this.ruleform.description='';
                this.ruleform.locationId='';
                this.ruleform.beforedescription='';
                this.ruleform.userDescription='';
                this.ruleform.adminDescription='';
            },
            //刷新数据
            refresh()
            {
                this.reset();
                console.log(this.ruleform.typeId);
                var data = {'typeId': this.ruleform.typeId};
                this.getLocations(data);
                this.getListUser(data);
                this.getShowUser();
            },
            getDescription() {
                console.log(this.ruleform);
                var i = 0;
                var id= 0;
                for (i; i < this.descriptions.length; i++)
                {
                    if (this.ruleform.userDescription === this.descriptions[i].description)
                    {
                        id=this.descriptions[i].id;
                    }
                }
                if (id === 0)
                {
                    return;
                }
                var data= {"repairUserDescriptionId":id};
                this.$axios.post("/api/v1/user/repair/listadmin", data).then(result => {
                    this.ruleform.adminDescription='';
                    return result.data;
                })
                    .then(data1 => {
                        console.log(data1);
                        this.beforedescriptions = data1.data;
                    });
            }

        },

    }
</script>

<style scoped>
    .el-input{
        width: 600px;
    }

</style>
